/*字体颜色*/
/*主要字色*/
/*标题*/
/*二级标题、简介*/
/*主题字色*/
/*突出色*/
/*界面主题色*/
/*主题风格色*/
/*背景色*/
/*线条颜色*/
/*线条颜色*/
/*跟随主题色变化的背景色*/
/*字体大小 ，如果出现非单行情况可搭配行高，*/
/*头部标题*/
/*辅助标题*/
/*主要标题*/
/*主要简介、二级标题*/
/*主要简介、二级标题*/
/*各类间距，高度*/
/*横向间距*/
/*纵向间距*/
/*
盒子阴影 
@right_left 右边阴影为正数 左边负数
@bottom_top 下边阴影为正数 上边负数
@box  阴影大小
@box_color 阴影颜色
*/
/*
定义圆角
@radius 圆角大小
*/
/*
文字阴影,可以指定多组阴影
@right_left1 右边阴影为正数 左边负数
@bottom_top1 下边阴影为正数 上边负数
@text  阴影大小
@text_color 阴影颜色
*/
/*
透明度 或渐变 1为不透明 0透明
css3 rgba(110, 142, 185, .4)!important;前三个是颜色值 后一个是透明值
用来兼容所有浏览器
*/
/*
列布局
@c1 列数
@c2 列宽
@c3 列间距
@c4 边框样式
*/
/*背景渐变
@start  渐变开始颜色
@end  结束颜色
*/
/*
画轮廓 就是内部框
@outline 样式
@outline1 间距 负数在内部
*/
/*
旋转角度
@ro定义度数 
IE不支持 滤镜支持0，1，2，3
*/
.rotate50 {
  transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -o-transform: rotate(50deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/*
菱形旋转角度
@x横向缩放比例
@y纵向缩放比例
*/
.skew30 {
  transform: skew(50deg, 30deg);
  -webkit-transform: skew(50deg, 30deg);
  -moz-transform: skew(50deg, 30deg);
  -o-transform: skew(50deg, 30deg);
  -ms-transform: skew(50deg, 30deg);
}
/*
放大缩小
@x横向缩放比例
@y纵向缩放比例
*/
.my_scale {
  transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
}
/*
移动距离
@x横向移动距离
@y纵向移动距离
*/
.translate80 {
  transform: translate(80px, 80px);
  -webkit-transform: translate(80px, 80px);
  -moz-transform: translate(80px, 80px);
  -o-transform: translate(80px, 80px);
  -ms-transform: translate(80px, 80px);
}
/*
综合上面4种变化,效果看下面的过度动画
@rotate
@scale
@skew
@translate
*/
/*
过度动画 
id是css属性
2s过度时间 0s是开始时间
ease-in进入
*/
/*
less文件中定义的函数
Animation 动画 
@animation-name规定需要绑定到选择器的 keyframe 名称
@animation-duration规定完成动画所花费的时间，以秒或毫秒计,默认是 0。
@animation-timing-function规定动画的速度曲线。默认是 "ease"。
@animation-delay规定在动画开始之前的延迟。默认是 0。
@animation-iteration-count规定动画应该播放的次数。默认是 1。
@animation-direction规定是否应该轮流反向播放动画。默认是 "normal"。
*/
.my_animation {
  animation: mykeyframes 5s linear 2s infinite normal;
  /* Firefox: */
  -moz-animation: mykeyframes 5s linear 2s infinite normal;
  /* Safari 和 Chrome: */
  -webkit-animation: mykeyframes 5s linear 2s infinite normal;
  /* Opera: */
  -o-animation: mykeyframes 5s linear 2s infinite normal;
}
/***CSS定义的keyframes如下：****/
@keyframes mykeyframes {
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
@-moz-keyframes mykeyframes {
  /* Firefox */
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
@-webkit-keyframes mykeyframes {
  /* Safari 和 Chrome */
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
@-o-keyframes mykeyframes {
  /* Opera */
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
.refresh {
  float: right;
}
.pailogs_list {
  font-size: 0.68rem !important;
  margin: 0!important;
}
.pailogs_list a {
  display: inline-block;
  width: 100%;
}
.pailogs_list .item-title {
  width: 25%;
}
.pailogs_list .item-content div {
  color: #999;
}
.pailogs_list .item-content:first-child div {
  color: #ff7552;
}
.pailogs_list .avatar {
  vertical-align: -6px;
  margin-right: .25rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.pailogs_list .lead {
  margin-right: .25rem;
  background: #ff7552;
  color: #fff;
  text-align: center;
  font-size: 0.58rem;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  padding: 0 0.2rem;
  height: 1rem;
  line-height: 1rem;
}
.pailogs_list .out {
  margin-right: .25rem;
  background: #ff7552;
  color: #fff;
  text-align: center;
  font-size: 0.58rem;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  padding: 0 0.2rem;
  height: 1rem;
  line-height: 1rem;
  background: #fff;
  color: #999;
  border: 1px solid #cacaca;
}
.pailogs_list .time {
  width: 40%;
}
